<template>
	<view>
		<!-- 顶部导航 -->
		<!-- <view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
			</view>
		</view> -->
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<u-top-tips ref="uTips"></u-top-tips>
			<view class="list">
				<!-- 无订单显示 -->
				<view class="onorder" v-if="list.length==0">
					<image src="/static/img/noorder.png"></image>
					<view class="text">
						没有相关订单
					</view>
				</view>
				<!-- 订单数据 -->
				<view class="row" v-for="(row,index) in list" :key="index" @click="toOrderDetai(row)">
					<view class="flex_row" style="justify-content: space-between;margin-bottom: 38upx;">
						<view class="title">{{ row.orderType | orderTitle }}</view>
						<view class="status">{{ row.orderStatus | orderStatus }}</view>
					</view>
					<view class="order-info">
						<view class="left">
							<image :src="row.stylist.headphoto" v-if="row.user === null"></image>
							<image :src="row.user.headphoto" v-else></image>
						</view>
						<view class="right">
							<view class="name" v-if="row.user === null">搭配师:{{ row.stylist.nickname }}</view>
							<view class="name" v-else>客户地址:{{ row.user.city }}</view>
							<view class="spec">下单日期: {{ formatDate(row.orderTime) }}</view>
							<view class="price-number">商品单价: ￥{{ row.orderMoney }}</view>
							<view class="spec">搭配单号: {{ row.orderNo }}</view>
						</view>

					</view>
					<!-- 1:待签到(线下), 2: 待结束(线下), 3:待付款, 4:已取消, 5:已完成,6:申述中,7:穿搭方案制作中 -->
					<view class="btns">
						<block v-if="row.orderStatus === 1">
							<view v-if="isBlank(row.stylist)">
								<!-- 搭配师操作 -->
								<view class="default" @click.stop="signOrder(row)">取消订单</view>
							</view>
						</block>
						<block v-if="row.orderStatus === 2">
							<view>
								<!-- 搭配师、用户操作 -->
								<view class="default" @click.stop="finishOrder(row)">结束订单</view>
							</view>
						</block>
						<block v-if="row.orderStatus === 3">
							<view v-if="isBlank(row.user)">
								<!-- 用户操作 -->
								<view class="default" @click.stop="cancelOrder(row)">取消订单</view>
								<view class="pay" @click.stop="toPayment(row)">付款</view>
							</view>
							<view v-if="isBlank(row.stylist)">
								<!-- 搭配师操作 -->
								<view class="default" @click.stop="cancelOrder(row)">取消订单</view>
							</view>
						</block>
						<block v-if="row.orderStatus === 4">
							<!-- 无需操作 -->
						</block>
						<block v-if="row.orderStatus === 5">
							<view v-if="row.user === null">
								<!-- 用户操作 -->
								<view v-if="!row.evaluated" class="default" @click.stop="evaluateOrder(row)">评价</view>
								<view class="pay" @click.stop="watchWearPlan(row)">查看方案</view>
							</view>
							<!-- 搭配师无操作 -->
						</block>
						<block v-if="row.orderStatus === 6">
							<!-- 无需操作 -->
						</block>
						<block v-if="row.orderStatus === 7">
							<view v-if="row.user === null">
								<!-- 用户操作 -->
								<!-- 未设置资料会直接取消，订单状态变为已取消 否则变为申诉中 -->
								<view class="default" @click.stop="cancelOrder(row)">取消订单</view>
							</view>
							<view v-if="isBlank(row.stylist)">
								<!-- 搭配师操作 -->
								<view class="default" @click.stop="cancelOrder(row)">取消订单</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		
		<orderPopue ref="orderPopue" :orderData="popueData"></orderPopue>
		<u-loadmore :status="status" @loadmore="moreData"/>
		
		<!-- 方案预览 -->
		<previewImage ref="previewImage" :opacity="0.8" :wearData="shareData" :imgs="imgs" :descs="descs" @changeData="changeData" @longPress="longPress"></previewImage>
	</view>
</template>
<script>
	import { isBlank } from '@/utils/common.js'
	import orderPopue from './order_popue.vue'
	import { mixin } from "@/mixins/wearPlan.js"
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
	
	export default {
		data() {
			return {
				list: [],
				queryForm: {
					pageNum: 1,
					pageSize: 10
				},
				status: 'loadmore',
				evaluateShow: false,	// 评价弹窗
				popueData: {},
			};
		},
		components: {
			orderPopue,
			previewImage
		},
		mixins:[mixin], //混入文件
		filters: {
			orderTitle(val) {
				switch (val){
					case 0:
						return "线下订单"
						break;
					case 1:
						return "线上穿搭服务订单"	// 暂时废弃
						break;
					case 2:
						return "购买线上搭配方案"
						break;
				}
			},
			orderStatus(val) {
				switch (val){
					case 0:
						return "待接单"
						break;
					case 1:
						return "待签到"
						break;
					case 2:
						return "待结束"
						break;
					case 3:
						return "待付款"
						break;
					case 4:
						return "已取消"
						break;
					case 5:
						return "已完成"
						break;
					case 6:
						return "申述中"
						break;
					case 7:
						return "穿搭方案制作中"
						break;
				}
			},
		},
		computed: {
			formatDate () {
				return function (val) {		// 对计算属性进行传参
					return val ? this.$u.timeFormat(val, 'yyyy-mm-dd hh:MM:ss') : ''
				}
			}
		},	
		// onLoad(option) {
		// 	this.fetchData()	// 获取全部订单	
		// },
		onShow() {
			this.queryForm = {
				pageNum: 1,
				pageSize: 10
			}
			this.fetchData()
		},
		onPullDownRefresh() {
			this.queryForm = {
				pageNum: 1,
				pageSize: 10
			}
			this.status = "loadmore"
			this.fetchData()
		},
		onReachBottom(e) {
			if(this.status === 'loadmore') {
				this.moreData()
			}
		},
		methods: {
			isBlank,
			fetchData() {
				this.$u.api.findOrder(this.queryForm).then(res => {
					uni.stopPullDownRefresh()
					if (res.code === 200) {
						this.list = res.data.records
					}
				})	
			},
			moreData() {
				this.status = 'loading';
				this.queryForm.pageNum++;
				
				this.$u.api.findOrder(this.queryForm).then(res => {
					if (res.code === 200) {
						this.list = this.list.concat(res.data.records)
						if(this.list.length < res.data.total) {
							this.status = 'loadmore'
						}else {
							this.status = 'nomore'
						}
					}
				})
			},
			// 按钮系列操作
			toOrderDetai(row) {
				uni.navigateTo({
					url: '/pages/order/order_list/order_detail?orderNo=' + row.orderNo 
				})  
			},
			// 取消订单
			cancelOrder(row) {
				let content = '确定取消此订单？'
				if(row.user === null) {
					// 我是用户
					content = '确定取消此订单？一天内最多取消三次订单即不可在地图下单'
				}
				
				if(row.stylist === null) {
					// 我是搭配师
					content = '确定取消此订单？取消订单过多将会影响发单数'
				}
				
				uni.showModal({
					title: '取消订单',
					content: content,
					success: (res) => {
						if (res.confirm) {
							this.doCancelOrder(row);
						}
					}
				});
			},
			doCancelOrder(row) {
				var data = {
					orderNo: row.orderNo
				}
				this.$u.api.cancelOrder(data).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: "取消订单成功",
							icon: "none"
						})
						row.orderStatus = res.data.orderStatus
					}
				})
			},
			// 搭配师签到线下订单
			signOrder(row) {
				var _this = this
				uni.showModal({
					title: "提示",
					content: "请确认是否在指定地点和约定搭配时间，签到后开始将计算陪购时长。",
					success: (res) => {
						if (res.confirm) {
							uni.getSystemInfo({ // 获取系统信息
								success(res) {
									let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
									let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
									if (locationEnabled == false || locationAuthorized == false) {
										// GPS 未授权
										uni.showToast({
											title: "未授权定位, 请返回地图首页授权获取位置功能以提供相应的服务",
											icon: "none"
										})
										return false
									} else {
										// GPS 已授权 判断微信定位是否授权
										uni.authorize({
											scope: 'scope.userLocation',
											success() {
												// GPS已授权 微信定位已授权
												uni.getLocation({
													type: 'gcj02',
													success({latitude,longitude}) {
														var data = {
															orderNo: row.orderNo,
															latitude: latitude,
															longitude: longitude
														}
														_this.$u.api.stylistSign(data).then(res => {
															if (res.code === 200) {
																uni.showToast({
																	title: "签到订单成功",
																	icon: "none"
																})
																row.orderStatus = 2	// 订单进入待结束
															}
														})
													}
												});
											},
											fail() {
												// GPS已授权 微信定位未授权
												uni.showModal({
													title: '未打开小程序定位',
													content: '找不到您的位置，请开启定位',
													confirmText: '开启定位',
													showCancel: false,
													success: (res) => {
														if (res.confirm) {
															uni.openSetting(); // 打开地图权限设置
														}
													}
												});
											}
										});
									}
								}
							})
						}
					}
				});
			},
			// 搭配师提前结束订单
			finishOrder(row) {
				var _this = this
				uni.showModal({
					title: "提示",
					content: "搭配开始前一小时内提前结束按一小时计费,超出一小时不支持提前结束,您确定要提前结束订单吗? ",
					success: (res) => {
						if (res.confirm) {
							var data = {
								orderNo: row.orderNo
							}
							_this.$u.api.finishOrder(data).then(res => {
								if (res.code === 200) {
									row.orderStatus = 5 // 订单已完成
								}
							})
						}
					}
				});
			},
			// 支付订单
			toPayment(row) {
				var that = this
				
				uni.showLoading({
					title: '正在获取支付参数'
				})
				var data = {
					orderNo: row.orderNo,
					payType: 0 	// 0：微信小程序微信支付,1:APP微信支付, 2:支付宝支付, 3:支付宝小程序支付宝支付, 4:其他, 5:微信网页支付, 6:苹果支付
				}
				
				that.$u.api.getPayParams(data).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						console.log("获取支付参数成功，开始调用微信支付接口")
						console.log(res)
				
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								console.log("支付成功")
								that.$refs.uTips.show({
									title: '支付成功, 正在邀请搭配师为您制作穿搭方案，可进入订单详情完善资料以供搭配师参考',
									type: 'success',
									duration: '6000'
								})
								row.orderStatus = 7 // 穿搭方案制作中
								// 跳转至聊天
								uni.navigateTo({
									url: '/pagesB/pages/chat/chat?name=' + row.stylist.nickname + '&imUser=' + row.stylist.imUser + "&face=" + row.stylist.headphoto
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			// 评价订单
			evaluateOrder(row) {
				this.popueData = row
				this.$refs.orderPopue.show()
			},
			// 查看方案
			watchWearPlan(row) {
				let data = {
					orderId: row.id
				}
				this.$u.api.findSchemeByOrderId(data).then(res => {
					if (res.code === 200) {
						this.imgs = []
						this.descs = []
						this.shareData = res.data
						this.shareData.content = JSON.parse(res.data.content)
				
						for (let i in this.shareData.content) {
							this.imgs.push("https://posting.imguangguang.com/" + this.shareData.content[i][0].photo)
							this.descs.push(this.shareData.content[i][0].introduce)
						}
						this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.topTabBar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: white;
		height: 80upx;
		display: flex;
		justify-content: space-around;
		.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #909090;
			font-size: 28upx;

			.text {
				height: 76upx;
				display: flex;
				align-items: center;
				&.on {
					font-size: 32upx;
					font-weight: bold;
					color: #111100;
					border-bottom: solid 6upx #B1BEFD;
				}
			}
		}

	}

	.order-list {
		// margin-top: 80upx;
		padding-top: 20upx;
		width: 100%;
		.list {
			width: 100%;
			margin: 0 auto;
			.onorder {
				width: 100%;
				height: 50vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;

				image {
					width: 20vw;
					height: 20vw;
					border-radius: 100%;
				}

				.text {
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					color: #444;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.row {
				padding: 34upx 24upx 40upx 24upx;
				border-radius: 16upx;
				background-color: #fff;
				margin: 30upx 32upx;
				.title {
					font-size: 28upx;
					font-weight: bold;
					color: #111111;
					display: flex;
					align-items: center;
				}
				
				.status {
					font-size: 24upx;
					font-weight: bold;
					color: #999999
				}

				.order-info {
					width: 100%;
					display: flex;
					.left {
						flex-shrink: 0;
						width: 180upx;
						height: 180upx;
						image {
							width: 180upx;
							height: 180upx;
							border-radius: 8upx;
							background: #D8D8D8
						}
					}

					.right {
						width: 100%;
						margin-left: 24upx;
						position: relative;
						.name {
							width: 100%;
							font-size: 24upx;
							font-weight: bold;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}

						.spec {
							margin: 16upx 0;
							color: #999999;
							font-size: 24upx;
						}

						.price-number {
							color: #999999;
							font-size: 24upx;
						}
					}
				}

				.btns {
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 30upx;
					view {
						min-width: 120upx;
						height: 58upx;
						padding: 0 22upx;
						border-radius: 29px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26upx;
						margin-left: 20upx;
					}

					.default {
						border: solid 1upx #999999;
						color: #999999;
					}

					.pay {
						border: none;
						background: #B1BEFD;
						color: white;
					}
				}
			}
		}
	}
	
</style>
